import React, { Component } from 'react'
import './index.css'

export default class Header extends Component {
	render() {
		return (
			<div className="todo-header">
				<input type="text" ref={c => this.nameElement = c} onKeyUp={this.add} placeholder="请输入你的任务名称，按回车键确认"/>
			</div>
		)
	}

	add = (e)=>{
		if(e.keyCode !== 13) return
		//获取用户输入
		let {value} = this.nameElement
		//校验数据
		if(!value.trim()) return alert('输入不能为空！')
		//将用户的输入变为一个todo对象，形如：{id:???,name:???,done:????}
		const todoObj = {id:Date.now(),name:value,done:false}
		//通知App追加一个todo
		this.props.addTodo(todoObj)
		//清空用户输入
		this.nameElement.value = ''
	}
}
